<template>
  <div>
    <div>
      <div class="crumbs">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>
            <i class="el-icon-lx-cascades"></i> 分配房间床位
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="container">
        <div class="container-left" style="width: 20%">
          <el-tree
              :data="treeData.data"
              :props="{ children: 'children', label: 'label' }"
              node-key="id"
              @node-click="handleNodeClick"
          />
        </div>
        <div class="container-left" style="width: 75%">


          <el-tabs type="card" @tab-click="handleClick" style="margin-right: 100px">
            <el-tab-pane label="男生分配">
              <div class="handle-box">
                <el-form :inline="true" :model="queryFloor" class="demo-form-inline">
                  <el-form-item label="公寓">
                    <el-select v-model="queryFloor.name" filterable placeholder="选择公寓"
                               @change="getBuilding"
                               class="handle-input mr10">
                      <el-option
                          v-for="item in buildingNames"
                          :key="item.sid"
                          :label="item.name"
                          :value="item.name"
                      >
                        <span style="float: left">{{ item.name }}</span>
                        <span style="
                                        padding-left: 50px;
                                        color: var(--el-text-color-secondary);
                                        font-size: 13px; ">{{ item.region }}</span>
                      </el-option>
                    </el-select>
                  </el-form-item>

                  <el-form-item label="楼栋">
                    <el-select
                        v-model="tableSelection.buildingId"
                        filterable
                        placeholder="请选择楼栋名"
                    >
                      <el-option
                          v-for="item in options"
                          :key="item.value"
                          :label="item.floor"
                          :value="item.sid"
                      >
                        <!--                        <span style="float: left">{{ item.name }}</span>-->
                        <!--                        <span style="-->
                        <!--                padding-left: 50px;-->
                        <!--                color: var(&#45;&#45;el-text-color-secondary);-->
                        <!--                font-size: 13px; ">{{ item.region }}</span>-->
                        <!--                        <span style="-->
                        <!--                 padding-left: 50px;-->
                        <!--                color: var(&#45;&#45;el-text-color-secondary);-->
                        <!--                font-size: 13px; "-->
                        <!--                        >{{ item.type }}</span-->
                        <!--                        >-->
                        <!--                        <span style="-->
                        <!--                 padding-left: 50px;-->
                        <!--                color: var(&#45;&#45;el-text-color-secondary);-->
                        <!--                font-size: 13px; "-->
                        <!--                        >【{{ item.floor }}】层</span-->
                        <!--                        >-->
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" icon="" @click="handleAlloc"
                    >批量分配
                    </el-button
                    >
                  </el-form-item>
                  <!--                  <el-button @click="onReset">重置</el-button>-->
                </el-form>
              </div>
              <el-divider/>
              <el-table
                  :data="tableData"
                  border
                  class="table"
                  ref="multipleTable"
                  header-cell-class-name="table-header"
                  @selection-change="handleSelectionChange"

              >
                <el-table-column type="selection"/>
                <el-table-column
                    :show-overflow-tooltip="true"
                    :prop="item.prop"
                    :label="item.label"
                    v-for="item in props"
                    :key="item.prop"
                >
                </el-table-column>
                <!--              <el-table-column>-->
                <!--                <el-table-column-->
                <!--                    label="操作"-->
                <!--                    width="220px"-->
                <!--                    align="center"-->
                <!--                    fixed="right"-->
                <!--                >-->
                <!--                  <template #default="scope">-->
                <!--                    <el-button-->
                <!--                        type="text"-->
                <!--                        icon="el-icon-delete"-->
                <!--                        class="red"-->
                <!--                        @click="handleDelete(scope.$index, scope.row.sid)"-->
                <!--                    >移除班级-->
                <!--                    </el-button-->
                <!--                    >-->
                <!--                    <el-button-->
                <!--                        type="text"-->
                <!--                        icon="el-icon-edit"-->
                <!--                        class="red"-->
                <!--                        @click="handleClass( scope.$index,scope.row.majorId,scope.row.sid)"-->
                <!--                    >微调班级-->
                <!--                    </el-button-->
                <!--                    >-->
                <!--                  </template>-->
                <!--                </el-table-column>-->
                <!--              </el-table-column>-->
              </el-table>
              <div class="pagination">
                <el-pagination
                    :currentPage="query.pageNum"
                    :page-sizes="[10, 20, 40]"
                    :page-size="query.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageTotal"
                    @size-change="handleSizeChange"
                    @current-change="handlePageChange"
                >
                </el-pagination>
              </div>
            </el-tab-pane>
            <el-tab-pane label="女生分配">
              <div class="handle-box">
                <el-form :inline="true" :model="queryFloor" class="demo-form-inline">
                  <el-form-item label="公寓">
                    <el-select v-model="queryFloor.name" filterable placeholder="选择公寓"
                               @change="getBuilding"
                               class="handle-input mr10">
                      <el-option
                          v-for="item in buildingNames"
                          :key="item.sid"
                          :label="item.name"
                          :value="item.name"
                      >
                        <span style="float: left">{{ item.name }}</span>
                        <span style="
                                        padding-left: 50px;
                                        color: var(--el-text-color-secondary);
                                        font-size: 13px; ">{{ item.region }}</span>
                      </el-option>
                    </el-select>
                  </el-form-item>

                  <el-form-item label="楼层">
                    <el-select
                        v-model="tableSelection.buildingId"
                        filterable
                        placeholder="请选择楼栋名"
                    >
                      <el-option
                          v-for="item in options"
                          :key="item.value"
                          :label="item.floor"
                          :value="item.sid"
                      >
                        <!--                        <span style="float: left">{{ item.name }}</span>-->
                        <!--                        <span style="-->
                        <!--                padding-left: 50px;-->
                        <!--                color: var(&#45;&#45;el-text-color-secondary);-->
                        <!--                font-size: 13px; ">{{ item.region }}</span>-->
                        <!--                        <span style="-->
                        <!--                 padding-left: 50px;-->
                        <!--                color: var(&#45;&#45;el-text-color-secondary);-->
                        <!--                font-size: 13px; "-->
                        <!--                        >{{ item.type }}</span-->
                        <!--                        >-->
                        <!--                        <span style="-->
                        <!--                 padding-left: 50px;-->
                        <!--                color: var(&#45;&#45;el-text-color-secondary);-->
                        <!--                font-size: 13px; "-->
                        <!--                        >【{{ item.floor }}】层</span-->
                        <!--                        >-->
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" icon="" @click="handleAlloc"
                    >批量分配
                    </el-button
                    >
                  </el-form-item>
                  <!--                  <el-button @click="onReset">重置</el-button>-->
                </el-form>
              </div>
              <el-divider/>
              <el-table
                  :data="tableData"
                  border
                  class="table"
                  ref="multipleTable"
                  header-cell-class-name="table-header"
                  @selection-change="handleSelectionChange"

              >
                <el-table-column type="selection"/>
                <el-table-column
                    :show-overflow-tooltip="true"
                    :prop="item.prop"
                    :label="item.label"
                    v-for="item in props"
                    :key="item.prop"
                >
                </el-table-column>
                <!--              <el-table-column>-->
                <!--                <el-table-column-->
                <!--                    label="操作"-->
                <!--                    width="220px"-->
                <!--                    align="center"-->
                <!--                    fixed="right"-->
                <!--                >-->
                <!--                  <template #default="scope">-->
                <!--                    <el-button-->
                <!--                        type="text"-->
                <!--                        icon="el-icon-delete"-->
                <!--                        class="red"-->
                <!--                        @click="handleDelete(scope.$index, scope.row.sid)"-->
                <!--                    >移除班级-->
                <!--                    </el-button-->
                <!--                    >-->
                <!--                    <el-button-->
                <!--                        type="text"-->
                <!--                        icon="el-icon-edit"-->
                <!--                        class="red"-->
                <!--                        @click="handleClass( scope.$index,scope.row.majorId,scope.row.sid)"-->
                <!--                    >微调班级-->
                <!--                    </el-button-->
                <!--                    >-->
                <!--                  </template>-->
                <!--                </el-table-column>-->
                <!--              </el-table-column>-->
              </el-table>
              <div class="pagination">
                <el-pagination
                    :currentPage="query.pageNum"
                    :page-sizes="[10, 20, 40]"
                    :page-size="query.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageTotal"
                    @size-change="handleSizeChange"
                    @current-change="handlePageChange"
                >
                </el-pagination>
              </div>

            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {reactive, ref} from "vue";
import request from "../../utils/request";
import {ElMessage, ElMessageBox} from "element-plus";

export default {
  name: "DistributionBed",
  setup() {
    const treeData = reactive({
      data: [],
    });
    // const adviserId = localStorage.getItem("sid")
    const queryAdviserId = reactive({
      adviserId: localStorage.getItem("sid")
    })
    request.get("/college/ThreeTree",
        {
          params: queryAdviserId,
        }).then((res) => {
      treeData.data = res.data;
    });
    const handleNodeClick = (data) => {
      if (!data.children) {
        // getClassList(data.id);
        // query.majorId = data.id;
        query.className = data.label;
        getData();
      }
    };
    const props = [
      {label: "学号", prop: "studentId"},
      {label: "学生姓名", prop: "studentName"},
      {label: "身份证号", prop: "idCardNo"},
      {label: "性别", prop: "gender"},
      {label: "民族", prop: "nation"},
      {label: "年级", prop: "grade"},
      {label: "学院名称", prop: "collegeName"},
      {label: "专业名", prop: "majorName"},
      {label: "班级名称", prop: "className"},
      // {label: "加入班级时间", prop: "allocateDate"},
    ];
    const query = reactive({
      collegeId: "",
      majorId: "",
      className: "",
      studentName: "",
      sexType: "",
      adviserId: "",
      pageNum: 1,
      pageSize: 10,
    });
    const activeName = ref('first')
    const query1 = reactive({
      className1: "",
    });

    const tableData = ref([]);
    const pageTotal = ref(0);
    // 获取表格数据
    // 获取表格数据
    const getData = () => {
      tableData.value = [];
      query.adviserId = localStorage.getItem("sid")
      request
          .get("/student/queryStudentIdBed", {
            params: query,
          })
          .then((res) => {
            if (res.code != 0) {
              ElMessage.warning(res.msg);
              tableData.value = [];
            } else {
              tableData.value = res.data.records;
              pageTotal.value = res.data.total;
            }
          });
    };

    // 查询操作
    const handleSearch = () => {
      query.className = query1.className1;
      query.pageNum = 1;
      getData();
    };
    // 分页大小
    const handleSizeChange = (val) => {
      query.pageSize = val;
      getData();
    };
    // 分页导航
    const handlePageChange = (val) => {
      query.pageNum = val;
      getData();
    };

    //左右数据选取
    const handleClick = (tab) => {
      tableSelection.buildingId = ""
      if (tab.props.label === "男生分配") {
        query.sexType = "1"
        queryFloor.type = "男生公寓"
        queryFloor.name = ""
        getbuildingNames()

      } else {
        query.sexType = "2";
        queryFloor.type = "女生公寓"
        queryFloor.name = ""
        getbuildingNames();
      }
      getData()
    };
    const tableSelection = reactive({
      studentId: [],
      buildingId: "",
    });
    //选择列表框
    const handleSelectionChange = (val) => {
      tableSelection.studentId = [];
      for (var i in val) {
        tableSelection.studentId.push(val[i].studentId);
      }
    };
    //分配床位
    const handleAlloc = () => {
      if (!tableSelection.buildingId) {
        ElMessage.info("请先选择宿舍");
        return;
      }
      if (tableSelection.studentId.length === 0) {
        ElMessage.info("请选择学生");
        return;
      }
      ElMessageBox.confirm("确定分配吗？", "提示", {
        type: "warning",
      }).then(() => {
        request.post("/bed/distributionBed", tableSelection).then((res) => {
          if (res.code === null) {
            ElMessage.success("分配成功");
            getData();
          } else {
            tableSelection.studentId = [];
            // ElMessage.error("分配失败");
            ElMessage.warning(res.msg);
          }
        });
      });
    };
    // 单个数据移除
    // const handleDelete = (index, sid) => {
    //   // tableSelection.studentId = [];
    //   // tableSelection.studentId[0] = sid;
    //   handleAlloc();
    // };
    const queryFloor = reactive({
      type: "",
      name: "",
    });
    //楼层
    const options = ref([]);
    const getBuilding = () => {
      request.get("/building/queryAreaListByName", {
        params: queryFloor,
      }).then((res) => {
        options.value = res.data;
      });
    };
    const buildingNames = ref([]);
    const getbuildingNames = () => {
      request.get("/building/queryAreaList", {
        params: queryFloor,
      }).then((res) => {
        buildingNames.value = res.data;
      });
    };
    getbuildingNames()
    return {
      props,
      query,
      treeData,
      tableData,
      pageTotal,
      activeName,
      tableSelection,
      options,
      queryFloor, buildingNames, getbuildingNames,
      queryAdviserId,
      // classList,
      // BadgeData,
      // getBadgeData,
      // getClassList,
      handleSearch,
      handleSizeChange,
      handlePageChange,
      getData,
      getBuilding,
      // handleAdd,
      // handleDelete,
      // handleEdit,
      handleSelectionChange,
      handleNodeClick,
      handleClick,
      handleAlloc
    };
  }

}
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: row;
}

.container-left {
  width: 20%;
  padding-right: 20px;
}

.container-right {
  width: 80%;
  display: flex;
  flex-direction: column;
}

.handle-box {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}

.table {
  width: 100%;
  font-size: 14px;
}

.red {
  color: #ff0000;
}

.mr10 {
  margin-right: 10px;
}

.badge {
  display: inline;
  /* position: relative; */
  /* 相对元素原来的位置距离上边缘 50px */
  top: 5px;
  padding: 10px;
  padding-top: 2px;
  color: red;
}

.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
</style>